<template>
    <div class="box">
        <h1>v-model</h1>

        <div>keyword: {{ keyword }}</div>
        <input type="text" v-model="keyword">
        <!-- 不是同v-model，怎么实现和其一样的双向数据绑定 -->

        <br>

        <!-- 
            @input 事件，当输入的内容发生变化立即执行回调
            @change 内容变化且失焦
            @blur 失焦
         -->

        <!-- <input type="text" :value="keyword" @input="inputHandler">
        inputHandler(e) {
            this.keyword = e.targe.value
        } -->

        <br>

        <input type="text" :value="keyword" @input="keyword = $event.target.value">

        <br>

        <!-- <CustomInput :value="keyword" @input="xxxHandler"></CustomInput>
        xxxHandler(val) {
            this.keyword = val
        } -->

        <CustomInput :value="keyword" @input="keyword = $event"></CustomInput>

        <br>
        
        <CustomInput v-model="keyword"></CustomInput>
    </div>
</template>

<script>
import CustomInput from './CustomInput.vue'
export default {
    name: "ModelTest",
    components: { CustomInput },
    data() {
        return {
            keyword: '炒鸡大南通-葛晨'
        }
    }
}
</script>

<style scoped>

</style>